<template>
	<!-- 新建地址 -->
	<view>
		<u-navbar :title="type==1?'添加收货地址':'修改货地址'" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="minBox">
			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="100">
				<!-- 联系人 -->
				<view class="info">
					<u-form-item label="联系人" prop="name">
						<input type="text" placeholder="联系人" v-model="form.name" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 手机号 -->
				<view class="info">
					<u-form-item label="手机号" prop="mobile">
						<input type="text" placeholder="手机号" v-model="form.mobile" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 所在地区 -->
				<view class="info">
					<u-form-item label="所在地区" prop="area">
						<view class="region">
							<pick-regions @getRegion="handleGetRegion" style="width: 100%;">
								<view class="areaBox">
									<input type="text" disabled placeholder="点击选择省市区" v-model="form.area"
										placeholder-class="class">
									<image src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode="">
									</image>
								</view>
							</pick-regions>

						</view>
					</u-form-item>
				</view>
				<!-- 详细地址 -->
				<view class="info">
					<u-form-item label="详细地址" prop="address">
						<input type="text" placeholder="请填写详细地址" v-model="form.address" placeholder-class="class">
					</u-form-item>
				</view>
				<!-- 设为默认地址 -->
				<view class="info" v-if="type==1?false:true">
					<u-form-item label="设为默认地址" prop="name">
						<u-switch v-model="form.is_default" size="22" inactiveColor="#F0F1F1" activeColor="#806EFE">
						</u-switch>
					</u-form-item>
				</view>
			</u--form>
			<!-- 保存按钮 -->
			<view class="btnBox" @click="$u.throttle(submit, 1500)">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import qqmapsdk from '@/js_sdk/qqmap-wx-jssdk.min.js'
	import {
		mapKey
	} from '@/utils/global.js'
	var QQMapWX = new qqmapsdk({
		key: mapKey, //腾讯地图key
		// https://apis.map.qq.com 微信配置请求地址
	});
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			const mobile = (rule, value, callback) => {
				/^1[3-9]\d{9}$/.test(value) ? callback() : callback(new Error('请输入正确的手机号码'))
			}
			return {
				type: 1, //1添加收货地址 2修改货地址
				form: {
					name: '', //昵称
					mobile: '', //手机号
					area: "", //所在地区
					address: '', //详细地址
				},
				initialDefault: null, //是否默认地址初始值
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							type: 'string',
							max: 11,
							min: 11,
							required: true,
							message: '请输入正确手机号',

							trigger: ['blur', 'change']
						},
						{
							validator: mobile,
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					area: [{
						required: true,
						message: '请选择所在地区',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
				}

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.type = option.type
			console.log(option);

			if (option.type == 2) {
				// 编辑
				this.ressDetail(option.id)
			} else {
				// 新增
				this.getCity()
			}
		},
		methods: {
			// 初始化获取当前地址信息
			getCity() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						QQMapWX.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								const mapdata = res.result.ad_info;
								// province省份
								// city城市
								// district区县
								// address详细地址
								that.form.area = mapdata.province + '-' + mapdata.city + '-' +
									mapdata.district;
								that.form.address = res.result.address
								// that.city = mapdata.city;
								// console.log(res);
							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								//console.log(res);
							}
						});

					}
				});

			},
			// 保存
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.type == 2) {
						this.setDefault()
					} else {
						this.address()
					}
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			// 地址选择器回调
			handleGetRegion(region) {
				console.log(region);
				this.form.area = region.map(item => item.name).join('-')
			},
			// 查看地址详情
			async ressDetail(id) {
				let res = await this.$api.ressDetail({
					id
				})
				// 是否默认地址:0=否,1=是
				if (res.data.is_default) res.data.is_default = true
				else res.data.is_default = false
				this.initialDefault = res.data.is_default
				this.form = res.data
			},
			// 修改默认地址
			async setDefault() {
				if (this.initialDefault === this.form.is_default) {
					// 未修改默认地址选项
					this.address()
				} else {
					// 修改过
					let {
						code,
						msg
					} = await this.$api.setDefault({
						id: this.form.id
					})
					if (code === 1) {
						this.address()
					} else {
						uni.$u.toast(msg)
					}
				}
			},
			// 新增-编辑地址
			async address() {
				let {
					code,
					msg
				} = await this.$api.address(this.form)
				uni.$u.toast(msg)
				if (code === 1) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)

				}
			}
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.u-form-item {
		width: 100%;
		padding: 0;
	}

	.u-navbar__content__title {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
<style lang="scss" scoped>
	.minBox {
		padding: 0 32rpx 0;

		.info {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 8rpx 0;
			border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);

			input {
				flex: 1;
				color: rgba(0, 0, 0, 1);
			}

			.class {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}
		}
	}

	.btnBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 88rpx;
		border-radius: 600rpx;
		margin-top: 188rpx;
		background: linear-gradient(131.2deg, rgba(179, 142, 255, 1) 0%, rgba(130, 111, 255, 1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 700;
	}

	.region {
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;

		image {
			margin-top: 8rpx;
			width: 24rpx;
			height: 24rpx;
		}
	}

	.areaBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
</style>